<template>
  <xy-page>
    <div class="platformAccount">
      账号修改
      <div class="clearfix">
        <el-form :model="formData" status-icon class="platformAccount-table" ref="formData" :rules="rules">
          <el-form-item label="邮箱" prop="email" label-width="80px">
            <el-input v-model="formData.email" class="w300" ></el-input>
          </el-form-item>
          <el-form-item label="用户名" label-width="80px">
            <el-input v-model="formData.user" class="w300" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="修改密码" prop="oldpwd" label-width="80px">
            <el-input v-model="formData.oldpwd" class="w300" placeholder="输入原密码" type="passoword" minlength="5" maxlength="16"></el-input>
          </el-form-item>
          <el-form-item  label="" prop="newpwd" label-width="80px">
            <el-input v-model="formData.newpwd" class="w300" placeholder="新密码(5~16位，英文数字下划线)"  type="passoword" minlength="5" maxlength="16"></el-input>
          </el-form-item>
          <el-form-item  label="" prop="newpwd2" label-width="80px">
            <el-input v-model="formData.newpwd2" class="w300" placeholder="再次输入新密码" type="passoword" minlength="5" maxlength="16"></el-input>
          </el-form-item>
          <div class="txtC">
            <el-button class="w100 mgt40" @click="sumbitForm('formData')" >保存</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </xy-page>
  
</template>

<script>
export default {
  data() {
    var validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱地址'));
      } else {
      if (value !== '') {
        var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if(!reg.test(value)){
          callback(new Error('请输入有效的邮箱'));
        }
      }
        callback();
      }
    };
    var validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原密码'));
      } else {
      if (value !== '') {
        this.$refs.formData.validateField('newpwd');
      }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
      if (this.formData.newpwd !== '') {
        if(this.formData.newpwd.length>5 && this.formData.newpwd.length<16){
          this.$refs.formData.validateField('newpwd2');
        }else{
          callback(new Error('密码长度5~16位，英文数字下划线'));
        }
      }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formData.newpwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      formData:{
        email:"",
        user:"",
        oldpwd:"",
        newpwd:"",
        newpwd2:""
      },
      rules:{
        email:  [
          {validator: validateEmail, trigger: 'blur'}
        ],
        oldpwd: [
          {validator: validateOldPass, trigger: 'blur' }
        ],
        newpwd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        newpwd2: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    sumbitForm(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
    }
  },
 }
</script>

<style lang="scss" scoped>
.platformAccount{
  .platformAccount-table{
    position: relative;
    width: 380px;
    margin: 50px auto;
  }
 
}
</style>
